<template>
	<view class="components-theme">
		<view>
			<uni-section title="" subTitle="" type="line" style="margin-bottom: 3px;">
				<view class="box-bg">
					<!--适应手机状态栏的高度-->
					<view class="status_bar"
						style="height: var(--status-bar-height); width: 100%; background-color: #245b9f;">
					</view>
					<uni-nav-bar dark @clickLeft="back" color="#eee" backgroundColor="#245b9f" height="44"
						left-icon="left" title="告警总数" leftText="">
						<block slot="right">
							<view>
								<picker mode="selector" :value="index" :range="range" @change="bindDateChange"
									style="display: inline-block;">
									<view class="uni-input">{{currentYear}}年</view>
									<!-- <view class="uni-input" v-if="">{{year}}年</view> -->
								</picker>
								<u-icon name="arrow-down" color="#fff"
									style="display: inline-block; margin: 5px 5px 5px 5px;"></u-icon>
							</view>
						</block>
					</uni-nav-bar>
				</view>
			</uni-section>
			<view class="uni-list" style="margin-left: 350px;">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">

					</view>
				</view>
			</view>
		</view>





		<view class="cu-list menu card-menu top">
			<view class="padding flex text-center main">
				<view class="flex flex-sub flex-direction">
					<view class="text">
						<uni-icons custom-prefix="iconfont" type="icon-huodonggaojing" size="20" color="#D03A3A">
						</uni-icons>
						告警统计
						<text class="text1">{{recordListData.warningMessageCount}}<text class="text2">条</text></text>
					</view>
				</view>
			</view>
			<view class="charts-box">
				<qiun-data-charts type="column" :opts="opts" :chartData="chartData" />
			</view>
		</view>
		<view class="cu-list menu card-menu bottom">
			<view class="text">
				<view>
					<text class="text1">处理结果</text>
				</view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts1" :chartData="chartData1" />
				</view>
				<image class="img" src="../../../static/images/fenxi/cljg.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		warningList
	} from "@/api/warning.js"
	export default {
		data() {
			return {
				range: [],
				currentYear: new Date().getFullYear(), //获取当前年份
				recordListData: {},
				chartData: {},
				chartData1: {},
				index: 0,
				opts: {
					color: [
						"#FAC858",
						"#EE6666",
						"#FAC858",
						"#EE6666",
						"#73C0DE",
						"#3CA272",
						"#FC8452",
						"#9A60B4",
						"#ea7ccc",
					],
					padding: [15, 15, 0, 5],
					legend: {
						show: false,
					},
					xAxis: {
						disableGrid: true,
						fontSize: "12",
						fontColor: "#8C8C8C",
					},
					yAxis: {
						data: [{
							min: 0,
							max: 10,
							title: "(千次)",
						}, ],
						showTitle: true,
						gridType: "dash",
						dashLength: 20,
						height: 233,
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08,
							linearType: "custom",
							seriesGap: 5,
							linearOpacity: 0.5,
							customColor: ["#BA2D26"],
							colorStop: 1,
						},
					},
				},
				opts1: {
					rotate: false,
					rotateLock: false,
					color: ["#185F9A", "#343434"],
					padding: [40, 40, 40, 40],
					dataLabel: false,
					legend: {
						show: true,
						position: "right",
						lineHeight: 30,
						left: 20,
						fontSize: 14,
					},
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						ring: {
							activeRadius: 0,
							ringWidth: 10,
							offsetAngle: -90,
							labelWidth: 20,
							border: true,
							borderWidth: 5,
							borderColor: "#FFFFFF",
						},
						tooltip: {
							showBox: false,
						},
					},
				},
			};
		},


		onLoad() {
			for (let i = this.currentYear - 60; i <= this.currentYear; i++) {
				this.range.push(i)
			}
			this.range.reverse()
		},
		onReady() {
			this.getWarningList(this.currentYear);
		},
		methods: {
			getWarningList(data) {
				warningList(data).then((result) => {
					this.recordListData = result.data
					console.log("this.recordListData", this.recordListData)
					this.chartData1 = result.data.warningMessageTypeCount
					this.chartData2 = result.data.warningMessageHandleStateCount
					let res = {
						categories: this.chartData1.x,
						series: [{
							name: "目标值",
							data: this.chartData1.y,
						}, ],
					};
					let res1 = {
						series: [{
							data: [{
									name: "已处理：" + this.chartData2.processed + "条",
									value: this.chartData2.processed
								},
								{
									name: "未处理：" + this.chartData2.unhandled + "条",
									value: this.chartData2.unhandled
								},
							],
						}, ],
					};
					this.chartData = JSON.parse(JSON.stringify(res));
					this.chartData1 = JSON.parse(JSON.stringify(res1));

				}).catch((err) => {
					console.log(err)
				})
			},

			bindDateChange(e) {
				this.currentYear = this.range[e.detail.value]
				// console.log("当前年", this.currentYear)
				this.getWarningList(this.currentYear)
				this.index = e.detail.value // 弹出框关闭以后在出发bindDateChange事件数据还是在上次选择上
			},
			// 自定义菜单点击返回
			back() {
				this.$tab.switchTab("/pages/analyse/index");
				// uni.navigateBack({
				// 	delta: 1
				// })
			}
		},
	};
</script>

<style lang="scss" scoped>
	.components-theme {
		.top {
			border-top: 5px solid #d03a3a;
			background-color: #fff;
			margin-top: 36rpx;

			.main {
				background-color: #fff2f2;

				.text {
					display: inline-block;
					font-size: 28rpx;
					font-weight: 600;
					color: #343434;
					margin-top: 48rpx;
					margin-bottom: 50rpx;

					.text1 {
						font-size: 60rpx;
						font-style: italic;
						margin-top: 10rpx;
						margin-left: 22rpx;
						color: #d03a3a;

						.text2 {
							font-size: 30rpx;
							margin-left: 10rpx;
						}
					}
				}
			}
		}

		.bottom {
			position: relative;

			.text {
				background-color: #ffffff;
				padding-bottom: 40rpx;

				.text1 {
					display: block;
					line-height: 80rpx;
					padding-left: 22rpx;
					background-image: url(../../../static/images/fenxi/jx01.png);
					background-size: 178rpx 80rpx;
					background-repeat: no-repeat;
					color: #185f9a;
					font-size: 32rpx;
					font-weight: 700;
				}
			}

			.img {
				width: 20%;
				height: 20%;
				position: absolute;
				left: 28%;
				top: 44%;
			}
		}
	}

	.charts-box {
		width: 100%;
		height: 600rpx;
	}


	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	// #ifdef APP-PLUS
	::v-deep .uni-navbar__header-btns-right[data-v-6bda1a90] {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 88px !important;
	}

	.box1 {
		.charts-box {
			.sg {
				width: 19%;
				height: 8%;
				position: absolute;
				left: 41%;
				top: 32% !important;
			}
		}
	}

	// #endif
	.u-popup div {
		z-index: 999 !important;
	}
</style>
